<!-- 用户管理 -->
<template>
  <div class="whole">
    <el-container>
      <el-aside width="200px">
        <CommonAside />
      </el-aside>
      <el-container>
        <el-header>
          <ComponentsHeader />
        </el-header>
        <el-main>
          <div class="select">
            <el-button
              type="primary"
              round
              >选项卡1</el-button
            >
            <el-button round>选项卡2</el-button>
          </div>
          <div class="but">
            <!-- 添加 -->
            <el-button
              class="add"
              type="primary"
              @click="centerDialogVisible = true"
              >新增</el-button
            >

            <!-- 批量导入 -->
            <el-button
              class="import"
              type="success"
              >批量导入</el-button
            >
          </div>
          <!-- 添加窗口 -->
          <el-dialog
            title="添加用户"
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
            <span>
              <el-form
                ref="form"
                label-width="70px"
                :inline="true"
                class="addWindow"
                :model="form"
                :rules="rules">
                <!-- 部门 -->
                <el-form-item label="部门">
                  <el-select
                    v-model="form.value"
                    placeholder="请选择">
                    <el-option style="height: 100%">
                      <el-tree
                        :data="form.departmentMenu"
                        :props="form.department"
                        @node-click="handleNodeClick"></el-tree>
                    </el-option>
                  </el-select>
                </el-form-item>

                <!-- 工号 -->
                <el-form-item
                  label="工号"
                  prop="employee_number">
                  <el-input
                    v-model="form.employee_number"
                    placeholder="请输入工号"></el-input>
                </el-form-item>
                <!-- 姓名 -->
                <el-form-item
                  label="姓名"
                  prop="name">
                  <el-input
                    v-model="form.name"
                    placeholder="请输入姓名"></el-input>
                </el-form-item>
                <!-- 手机号 -->
                <el-form-item
                  label="手机号"
                  prop="phone">
                  <el-input
                    v-model="form.phone"
                    placeholder="请输入手机号"></el-input>
                </el-form-item>
                <!-- 性别 -->
                <el-form-item
                  class="addGender"
                  label="性别"
                  prop="gender">
                  <el-radio-group v-model="form.gender">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <!-- 职位 -->
                <el-form-item
                  style="display: block"
                  label="职位"
                  prop="job">
                  <el-radio-group v-model="form.job">
                    <el-radio label="管理员"></el-radio>
                    <el-radio label="普通用户"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </span>
            <span
              slot="footer"
              class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <!-- @click="centerDialogVisible = false" -->
              <el-button
                type="primary"
                @click="addUser"
                >确 定</el-button
              >
            </span>
          </el-dialog>
          <!-- 表单 -->
          <div class="main">
            <el-table
              :data="tableData"
              border
              style="width: 100%">
              <!-- 多选 -->
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <!-- 工号 -->
              <el-table-column
                label="工号"
                width="180">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.employee_number
                  }}</span>
                </template>
              </el-table-column>
              <!-- 姓名 -->
              <el-table-column
                label="姓名"
                width="180">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.name }}</span>
                </template>
              </el-table-column>
              <!-- 性别 -->
              <el-table-column
                label="性别"
                width="180">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.gender }}</span>
                </template>
              </el-table-column>
              <!-- 角色数量 -->
              <el-table-column
                label="角色数量"
                width="180">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.role }}</span>
                </template>
              </el-table-column>
              <!-- 职位 -->
              <el-table-column
                label="职位"
                width="180">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.job }}</span>
                </template>
              </el-table-column>
              <!-- 手机号 -->
              <el-table-column
                label="手机号"
                width="180">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.phone }}</span>
                </template>
              </el-table-column>
              <!-- 创建时间 -->
              <el-table-column
                label="创建时间"
                width="180">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.create_time
                  }}</span>
                </template>
              </el-table-column>

              <!-- 操作 -->
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="block">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="1000">
              </el-pagination>
            </div>
          </div>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import CommonAside from "@/components/CommonAside.vue";
import ComponentsHeader from "@/components/ComponentsHeader";
import { add } from "@/api";
import Cookie from "js-cookie";
export default {
  data() {
    return {
      form: {
        // 部门
        department: {
          children: "children",
          label: "label",
        },
        value: "",
        departmentMenu: [
          {
            label: "柳州城市职业学院",
            children: [
              {
                label: "信息工程系",
                children: [
                  {
                    label: "软件技术",
                  },
                  {
                    label: "大数据技术",
                  },
                ],
              },
              {
                label: "师范教育系",
                children: [
                  {
                    label: "幼师",
                  },
                  {
                    label: "小教",
                  },
                ],
              },
            ],
          },
        ],
        // 工号
        employee_number: "",
        // 名字
        name: "",
        // 手机号
        phone: "",
        // 性别
        gender: "",
        // 职位
        job: "",
        // 角色
        role: "1",
        create_time: "",
      },
      rules: {
        employee_number: [
          { required: true, trigger: "blur", message: "请输入工号" },
        ],
        name: [{ required: true, trigger: "blur", message: "请输入名字" }],
        gender: [
          {
            required: true,
            message: "请选择性别",
            trigger: "blur",
          },
        ],
        job: [
          {
            required: true,
            message: "请至少选择一个职位",
            trigger: "blur",
          },
        ],
      },
      tableData: [],
      centerDialogVisible: false,
    };
  },
  components: {
    CommonAside,
    ComponentsHeader,
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    addUser() {
      // 首先验证表单数据是否有效，根据表单验证规则
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单数据有效，将数据添加到表格中
          this.tableData.push({
            employee_number: this.form.employee_number,
            name: this.form.name,
            phone: this.form.phone,
            gender: this.form.gender,
            job: this.form.job,
            role: this.form.role,
            create_time: this.form.create_time,
          });

          // 清空表单数据
          this.form.name = "";
          this.form.employee_number = "";
          this.form.phone = "";
          this.form.job = "";
          this.form.gender = "";

          // 关闭弹窗
          this.centerDialogVisible = false;
        } else {
          // 表单数据无效，不执行任何操作，或者显示错误信息
        }
      });
    },
    fetchData() {
      add().then(({ data }) => {
        this.tableData = data;
      });
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>

<style>
.whole {
  background-color: #edf7ff;
}
.el-header {
  padding: 0;
}
.but {
  float: right;
  margin-top: 10px;
  padding-left: 10px;
  margin-bottom: 30px;
}
.form {
  margin-top: 60px;
}

.main {
  margin-top: 100px;
}
.addGender {
  display: block;
}
/* 添加弹窗 */
.el-input {
  width: 300px;
}
</style>
